<template>
	<view class="modifys">
		<!-- 头部 -->
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title" :share="false"></public-header>
		<view class="hei_100"></view>
		 <!-- #endif -->
		<!-- end -->
		
		<!-- <public-order v-if="detail" :modify="modify1" :detail="detail" :ticket="ticket"></public-order> -->
		<view  class="padd_32">
			<view class="address">
				<view class="title">服务地址</view>
				<view class="cont clearfix">
					<view class="fl">
						<view class="name">{{addAct.contactsName}}</view>
						<view class="phone">{{addAct.contactsPhone}}</view>
						<view class="add">{{addAct.province}}{{addAct.city}}{{addAct.region}}{{addAct.address}}</view>
					</view>
					<image src="/static/images/r-arrow.png" class="fr" mode="widthFix"></image>
				</view>
			</view>
			<view class="title uni-input clearfix">
				上门时间
				<text class="fr">{{detail.appointmentDatetime == null ? '暂无预约时间' : detail.appointmentDatetime}}</text>
			</view>
			<view class="title uni-input clearfix">
				服务类型
				<text class="fr" v-if="detail.business">{{detail.business.name}}</text>
			</view>
			<view class="title uni-input clearfix">
				服务次数
				<text class="fr">{{detail.amount}}*{{detail.univalence}}{{detail.univalenceUnit}}</text>
			</view>
			<view class="discount">
				<view class="coupon clearfix" @click="open">
					优惠卷
					<image src="/static/images/r-arrow.png" class="fr" mode="widthFix"></image>
					<text v-if="ticket" class="fr" :data-id="ticket_pri.id">
						<text>{{ ticket_pri.id == '' ? ticket.length : ticket_pri.pri }}{{ ticket_pri.id == '' ? '张优惠券' : '可抵扣(元)' }}</text>
					</text>
					<view v-else class="fr">暂无优惠券</view>
				</view>
				
			</view>
			<view class="pay clearfix">
				总金额：
				<text class="fr">RMB ¥{{ detail.price }}</text>
			</view>
			<view class="share clearfix" v-if="detail&&detail.business&&detail.typeId==2">
				已预支付：
				<text class="fr" style="color: #FCC800;">¥{{ detail.prepaidPrice }}</text>
				<!-- <text class="fr" style="color: #FCC800;" v-else>¥{{ (prepaidPrice-share-surplus)>0?(prepaidPrice-share-surplus).toFixed(2):'0.00' }}</text> -->
			</view>
			
			<view class="pay clearfix">
				实际应付金额：
				<text class="fr">RMB ¥{{ detail.price -detail.prepaidPrice- ticket_pri.pri }}</text>
			</view>
			<view class="requirement">
				<view>备注：</view>
				<input type="text" disabled="true" :value="detail.comments"/>
				<view class="hei_100">
				</view>
			</view>
		</view>
		<!-- 优惠券弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="public-tick">
				<!-- 头部 -->
				<!-- #ifndef MP-WEIXIN -->
				<view class="padd_32 header clearfix">
					<view class="fl"><image class="fl" src="/static/images/back.png" mode="widthFix" @click="$refs.popup.close()"></image></view>
					卡券选择
				</view>
				<view class="hei_100"></view>
				<!-- #endif -->
				<view class="top" v-if="!( _this.ticket.length < 0 || undefined)" @click="close">
					<view style="margin-left: 20rpx;">不使用优惠劵</view>
					<view class="fl"><image class="fl" src="/static/images/middle_icon_next@2x.png" mode="widthFix"></image></view>
				</view>
				<!-- end -->
				<scroll-view scroll-y class="adds_list">
					<!-- 优惠券列表 -->
					<view style="margin-bottom: 100rpx;" class="list padd_32" v-if="ticket.length">
						<view v-for="(item, index) in ticket" :key='index' class="clearfix"  :class="{'canuse-act': tIndex===index}"  @click.stop="ticket_act(item.id,item.limitation, item.price, index)">
							<!-- <view class="static" v-bind:class="[ ticket_index === index   ?  'canuse-act' : '' ]" @click="ticket_act(item.id,item.limitation, item.price, index)"> -->
							<!-- <view v-bind:class="ticket_index === index   ? 'canuse-act' : ''"  @click="ticket_act(item.id,item.limitation, item.price, index)"> -->
							<view class="fl canuse-body1">
								<view class="title">{{item.enterpriseName||'通用优惠券'}}</view>
								<view class="time">{{item.endDatetime}}到期</view>
							</view>
							<view class="fl canuse-body2">
								<view style="margin-top: 20rpx;">减<text style="font-size: 60rpx;font-weight: 500;">{{item.price}}</text></view>
								<view>满{{item.limitation}}</view>
							</view>
							<image class="fr" style="width: 32rpx;height:28rpx;margin: 60rpx 15rpx 0 0;" :src="tIndex + '' === index + '' ? '/static/images/button_check_selected.png' : '/static/images/button_check_normal.png'" mode="widthFix"></image>
						</view>
					</view>
					<!-- end -->
				</scroll-view>
				<!-- 按钮 -->
				<view class="btn">
					<view @click="$refs.popup.close()" v-if=" _this.ticket.length == 0 || undefined ">关闭</view>
					<view @click="select" v-else>确认</view>
				</view>
				<!-- end -->
			</view>
		</uni-popup>
		<view class="btn" @click="modifypays()">确认付款</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import PublicHeader from '@/components/PublicHeader.vue';
	// import PublicOrder from '@/components/PublicOrder.vue';
	import BiaofunDatetimePicker from '@/pageageA/components/biaofun-datetime-picker/biaofun-datetime-picker.vue';
	export default {
		computed: mapState(['hasLogin', 'uerInfo']),
		components: {
			PublicHeader,
			// PublicOrder
			uniPopup,
			BiaofunDatetimePicker,
		},
		data() {
			return {
				title: '已接单，请支付',
				modifys:true,
				detail: '',
				ticket: [],
				share: '',
				addAct:{
					address: '',
					city: '',
					contactsName: '',
					contactsPhone: '',
					createDatetime: '',
					id: '',
					province: '',
					region: '',
					userId: '',
				},
				ticket_index: '0',
				tickets: {
					pri: '',
					id: '',
					index: '',
				},
				ticket_pri: {
					pri: '',
					id: '',
					index: '',
				},
				orderId:'',
				tIndex:-1
			}
		},
		onLoad(){
			var _this = this;
			if (_this.hasLogin) {
				_this.$http
					.get('/user/order/vieworderdetail/' + _this.$Route.query.uid)
					.then(function(response) {
						console.log('个人信息', response);
						_this.detail = response.data
						_this.orderId = _this.detail.id
						console.log(_this.detail,"获取个人信息的同时获取到我的优惠券")
					})
					.catch(function(error) {
						console.log(error);
					});
				// 优惠券
					_this.$http
						.get('/user/order/coupons', {
							userId:_this.uerInfo.userId,
							orderId:_this.$Route.query.uid
						})
						.then(function(response) {
							_this.ticket = response.data;
							console.log(_this.ticket,"可用的优惠券")
						})
						.catch(function(error) {
							console.log(error);
						});
			}
			if (this.hasLogin && !this.meal) {
				_this.$http
					.get('/personal/center/getaddresslist/' + this.uerInfo.userId)
					.then(function(response) {
						_this.address = response.data;
						if (_this.address.length) {
							_this.addAct = _this.address[0]
						}
					})
					.catch(function(error) {
						console.log(error);
					});
			}
			else{
				_this.price = _this.detail.price
			}
		},
		methods: {
			modifypays() {
				var _this = this;
				let money = _this.detail.price -_this.detail.prepaidPrice- _this.ticket_pri.pri
				console.log(money,"尾款支付moneys")
				uni.navigateTo({
					url: '/pageageA/pages/balance/addmoney?type=尾款支付&money=' + money +'&orderId=' + _this.detail.id + '&couponsId=' + _this.ticket_pri.id 
				})
			},
			ticket_act(id, min, pri, index) {
				var _this = this;
				_this.tIndex = '';
				// 判断是否允许点击
				if ( _this.ticket.length == 0 || undefined) {
					return
				}
				if (_this.detail.price<min) {
					uni.showToast({
					    title: '本订单金额不足满减数',
					    duration: 1000,
						icon: 'none'
					})
					return
				}
					_this.tickets.pri = pri;
					_this.tickets.id = id;
					_this.tickets.index = index;
					_this.ticket_index = index;
					_this.tIndex = _this.ticket_index;
					_this.tIndex = index;
				},
			select() {
				let _this = this
				let pri = _this.tickets.pri;
				_this.ticket_pri.pri = _this.tickets.pri;
				_this.ticket_pri.id = _this.tickets.id;
				_this.ticket_pri.index = _this.tickets.index;
				_this.ticket_index = _this.tickets.index;
				this.$refs.popup.close();
			},
			open() {
				var _this = this;
				_this.ticket_index = ''
				// if (this.ticket_index !== '') {
				// 	let query = this.ticket[this.ticket_index]
				// 	this.ticket.splice(this.ticket_index, 1)
				// 	this.ticket.unshift(query)
				// 	this.ticket_index = 0
				// }
				_this.$refs.popup.open();
				// _this.ticket_index = _this.tickets.index;
			},
			close() {
				let _this = this
				_this.ticket_pri.pri = '';
				_this.ticket_pri.id = '';
				_this.ticket_pri.index = '';
				_this.ticket_index = ''
				this.$refs.popup.close();
			},
		}
	}
</script>

<style scoped lang="scss">
.input{
	width: 36%;
	float: right;
}
.main-input{
	border: none !important;
	height: 80rpx !important;
	line-height: 80rpx !important;
}
.public-order {
	padding-bottom: 30rpx;
}
.title {
	height: 100rpx;
	line-height: 100rpx;
	font-size: 32rpx;
	color: #333;
	border-bottom: 1rpx solid #d0d0d0;
	margin-top: 16rpx;
}
.title text {
	font-size: 26rpx;
}
.title image {
	width: 16rpx;
	margin-top: 38rpx;
	margin-left: 10rpx;
}
.title .down {
	width: 30rpx;
}
.title input{
	border: 1rpx solid #999;
	height: 40rpx;
	line-height: 40rpx;
	width: 80rpx;
	padding: 4rpx;
	padding-left: 10rpx;
	margin-top: 26rpx;
	margin-right: 10rpx;
	font-size: 26rpx;
}
.lebel {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding-top: 30rpx;
}
.lebel text {
	display: block;
	width: 218rpx;
	height: 66rpx;
	background: #f6f6f7;
	border-radius: 10rpx;
	font-size: 26rpx;
	line-height: 66rpx;
	text-align: center;
	font-size: #666;
	margin-left: 8rpx;
	margin-bottom: 30rpx;
}
.lebel .act {
	background: #fff;
	border: 1rpx solid $uni-color1;
	color: $uni-color1;
}
.canuse-act{
	background: #fff;
	border: 1rpx solid #21E416;
	color: $uni-color1;
}
.address{
	width: 100%;
	min-height: 200rpx;
}
.address .title {
	border: 0 none;
	height: 70rpx;
	line-height: 70rpx;
}
.address .cont {
	font-size: 26rpx;
	color: #333;
}
.address .cont view {
	margin-bottom: 10rpx;
	width: 648rpx;
}
.address .cont .phone {
	color: #666;
}
.address .cont .add {
	color: #999;
	font-size: 24rpx;
}
.address .cont image {
	width: 16rpx;
	margin-top: 40rpx;
}
.discount {
	/* margin-bottom: 46rpx; */
	overflow: hidden;
}
.discount view {
	height: 80rpx;
	line-height: 80rpx;
	color: #999;
	font-size: 26rpx;
}
.discount image {
	width: 14rpx;
	margin-top: 28rpx;
	margin-left: 10rpx;
}
.discount text {
	color: #333;
}
.payment view {
	font-size: 48rpx;
	color: $uni-color1;
	height: 88rpx;
	line-height: 88rpx;
}
.payment input {
	display: inline-block;
	color: $uni-color1;
	font-size: 48rpx;
	height: 88rpx;
	line-height: 88rpx;
	padding-left: 20rpx;
	width: 610rpx;
}
.payment .tit {
	font-size: 32rpx;
	color: #333;
	line-height: 90rpx;
	height: 90rpx;
}
.payment .tit text {
	font-size: 28rpx;
	color: #999;
}
.pay {
	height: 88rpx;
	line-height: 88rpx;
	font-size: 32rpx;
	color: #333;
}
.pay .fr {
	
}
.requirement {
	border-bottom: 1rpx solid #dfdfdf;
}
.requirement view {
	color: #333;
	font-size: 32rpx;
	line-height: 100rpx;
	height: 100rpx;
	border-bottom: 1rpx solid #dfdfdf;
}
.requirement input {
	height: 136rpx;
}
.requirement1 {
	min-height: 120rpx;
	/* border-bottom: 1rpx solid #dfdfdf; */
}
.requirement1 view {
	float: left;
	color: #333;
	font-size: 32rpx;
	line-height: 50rpx;
	height: 50rpx;
}
.requirement1 input {
	float: left;
	width: 150rpx;
	height: 50rpx;
	border: gray 1rpx solid;
	border-radius: 10rpx;
}
.btn {
	margin: 30rpx auto;
	background-color: $uni-color1;
	width: 686rpx;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	box-shadow: 0px 6rpx 20rpx 0px $uni-color1;
	border-radius: 10rpx;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.details .tit {
	width: 100%;
	min-height: 50rpx;
	font-size: 30rpx;
	color: #333;
	margin-top: 30rpx;
}
.details .tit image {
	width: 30rpx;
	margin-top: 8rpx;
	margin-right: 16rpx;
}
.details .tit .arr {
	width: 14rpx;
	margin-top: 10rpx;
	margin-left: 20rpx;
}
.details .cont {
	font-size: 24rpx;
	color: #999;
	padding: 22rpx 0;
	margin-bottom: 46rpx;
}
.details .cont image {
	width: 110rpx;
	border-radius: 10rpx;
}
.details .cont .name {
	font-size: 26rpx;
	color: #333;
	margin-bottom: 10rpx;
}
.details .cont .price {
	margin-top: 40rpx;
}
.public-tick {
	height: 100%;
	width: 100%;
	background-color: #f9fafb;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
/* 导航 */
.public-tick .header {
	height: 100rpx;
	width: 100%;
	background: #fff;
	line-height: 95rpx;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	font-size: 36rpx;
	color: #333;
	font-weight: 500;
	text-align: center;
}
.public-tick .header image {
	margin-top: 26rpx;
	width: 38rpx;
	position: absolute;
}
.public-tick .header .fr image {
	position: absolute;
	right: 32rpx;
}
.public-tick .header .fl text {
	margin-left: 14rpx;
}
.public-tick .header .tab {
	margin-left: 120rpx;
}
.public-tick .header .tab text {
	text-align: center;
	display: inline-block;
	font-size: 32rpx;
	color: #666;
	position: relative;
}
.public-tick .header .tab .tit {
	margin-right: 90rpx;
}
.public-tick .header .tab .tit:last-child {
	margin-right: 0;
}
.public-tick .header .tab .cur_sp {
	position: absolute;
}
.public-tick .header .tab .cur {
	font-weight: 500;
	color: #333;
}
.public-tick .header .tab .cur .cur_sp {
	width: 30rpx;
	height: 4rpx;
	background: $uni-color1;
	border-radius: 2rpx;
	right: 17rpx;
	bottom: 0;
}
.public-tick .list .clearfix {
	width: 100%;
	height: 176rpx;
	background-color: #fff;
	margin-top: 20rpx;
	/* overflow: hidden; */
}
.canuse-body1 {
	width: 350rpx;
	margin-left: 30rpx;
}
.canuse-body2 {
	width: 210rpx;
	/* text-align: center; */
	font-size: 44rpx;
	line-height: 124rpx;
	height: 124rpx;
	margin-top: 30rpx;
	// border-left: 1rpx dashed #BBBBBB;
	// padding-left: 20rpx;
}
.canuse-body2 view{
	color: $uni-color1 !important;
}
.canuse-body3{
	width: 32rpx;
	height: 32rpx;
}
.public-tick .list .clearfix .fl .title {
	color: #333333;
	font-size: 26rpx;
	margin-top: 30rpx;
	line-height: 37rpx;
	margin-bottom: 4rpx;
	border-bottom: 0 none;
	height: 37rpx;
	font-family: PingFangSC-Medium, PingFang SC;
}
.public-tick .list .clearfix .fl .time {
	font-size: 24rpx;
	color: #999;
	line-height: 33rpx;
	/* margin-bottom: 28rpx; */
}
.public-tick .list .clearfix .fl .text {
	font-size: 24rpx;
	color: #999;
	height: 68rpx;
	line-height: 33rpx;
	/* margin-bottom: 28rpx; */
}
.public-tick .list .clearfix .fl .state {
	min-width: 104rpx;
	height: 38rpx;
	line-height: 38rpx;
	text-align: center;
	border-radius: 6rpx;
	background: linear-gradient(270deg, #98d7ff 0%, #e782e9 100%);
	color: #fff;
	font-size: 26rpx;
	margin-bottom: 20rpx;
}
.public-tick .top {
	width: 91.48%;
	margin-left: 4.26%;
	margin-top: 18rpx;
	height: 92rpx;
	background: #FFFFFF;
	border-radius: 4px;
	border: 1rpx dashed $uni-color1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
}
.public-tick .top image {
	width: 20rpx;
	height: 20rpx;
	margin-right: 20rpx;
}
.public-tick .btn {
	width: 100%;
	height: 140rpx;
	background-color: #fff;
	border-top: 1rpx solid #dfdfdf;
	position: fixed;
	bottom: 0;
	margin-bottom: 0;
	box-shadow: 0 0 0 0;
}
.public-tick .btn view {
	width: 686rpx;
	height: 100rpx;
	background-color: $uni-color1;
	box-shadow: 0 6rpx 20rpx 0 $uni-color1;
	border-radius: 10rpx;
	color: #fff;
	text-align: center;
	font-size: 36rpx;
	line-height: 100rpx;
	margin: 0 auto;
	/* margin-top: 14rpx; */
}
.act {
	border: 1rpx solid $uni-color1;
	box-sizing: border-box;
}
.view_time .cont {
	width: 540rpx;
	padding-top: 40rpx;
	font-size: 30rpx;
	color: #a4a9b0;
	background-color: #fff;
	border-radius: 16rpx;
}
.view_time .cont .title {
	color: #333;
	font-size: 34rpx;
	text-align: center;
	line-height: 48rpx;
	margin-bottom: 40rpx;
}
.view_time .cont input {
	width: 390rpx;
	height: 80rpx;
	line-height: 80rpx;
	margin: 0 auto;
	padding-left: 30rpx;
	background-color: #f6f6f9;
}
.view_time .cont .clearfix {
	margin-top: 40rpx;
	height: 90rpx;
	line-height: 90rpx;
}
.view_time .cont .clearfix view {
	width: 49%;
	font-size: 32rpx;
	color: $uni-color1;
	text-align: center;
	font-weight: 500;
}
.view_time .cont .clearfix .fl {
	border-right: 1rpx solid #e7e7e7;
	font-weight: 400;
}
.adds_list{
	overflow: auto;
	height: 88%;
}
.adds_list .list {
	padding: 20rpx 32rpx;
	/* border-bottom: 1rpx solid #dfdfdf; */
	box-sizing: border-box;
}
.adds_list .list .fl view {
	font-size: 22rpx;
	color: #999;
	line-height: 30rpx;
	min-width: 48rpx;
}
.adds_list .list .fl .dot {
	width: 34rpx;
	height: 34rpx;
	border-radius: 100%;
	border: 1rpx solid #d6d6d6;
	margin-top: 16rpx;
	margin-bottom: 6rpx;
	margin-left: 4rpx;
}
.adds_list .list .fr {
	width: 624rpx;
	font-size: 26rpx;
	color: #999999;
	line-height: 37rpx;
}
.adds_list .list .fr .name {
	color: #333;
	font-size: 26rpx;
	margin-bottom: 6rpx;
	height: auto;
}
.adds_list .list .fr .name .fr {
	width: auto;
	margin-left: 58rpx;
}
.adds_list .list .fr .name .edit {
	color: $uni-color1;
}
.adds_list .list .fr .name .delete {
	color: #ff7272;
}
.adds_list .list .fr .phone {
	color: #666;
	font-size: 26rpx;
	margin-bottom: 10rpx;
}
.adds_list .bg_5EBEFF {
	background-color: #5ebeff;
	border: 0 none !important;
}
.adds_list .add {
	width: 686rpx;
	height: 100rpx;
	text-align: center;
	color: #fff;
	line-height: 100rpx;
	border-radius: 10rpx;
	box-shadow: 0px 6px 20px 0px $uni-color1;
	background-color: $uni-color1;
	font-size: 36rpx;
	position: fixed;
	bottom: 40rpx;
	left: 50%;
	margin-left: -343rpx;
}
.list_saff{
	width: 335rpx;
	height: 169rpx;
	margin-right: 6rpx;
	margin-bottom: 20rpx;
}
.list_saff image{
	width: 128rpx;
	height: 155rpx;
	margin: 0 24rpx;
}
.list_saff .fl{
	font-size: 24rpx;
	color: #999;
}
.list .list_saff .fl view{
	width: 140rpx;
	margin: 6rpx 0;
}
.list .list_saff .fl .name{
	margin-top: 16rpx;
	font-size: 28rpx;
	color: #666;
	line-height: 40rpx;
	font-weight: 500;
	margin: 10rpx 0;
}
.div_style{
		color:red
	}
</style>
